<template>
    <!-- 组件的结构 -->
    <div>
       <h1 v-text="msg" ref="title"></h1>
       <img src="./assets/logo.png" alt="vuelogo">
       <School ref="sch"></School>
       <button ref="btn" @click="showDom">点我控制台显示Dom元素</button>
    </div>
</template>

<script>
    //组件交互相关的代码(数据、方法等)
    //引入组件
    import School from './components/School-test.vue'
    export default{
            name:'App',
            components:{
                School
            },
            data(){
                return{
                    msg:'欢迎学习Vue！'
                }
            },
            methods:{
                showDom(){
                    console.log(this.$refs.title);//真实Dom元素
                    console.log(this.$refs.btn);//真实Dom元素
                    console.log(this.$refs.sch);//School组件的实例对象(vc)
                    //console.log(this.$refs);
                }
            }
            }
</script>

<style>

</style>